
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/semantic/semantic.min.css}"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
</head>

<script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}"></script>
<script type="text/javascript" th:src="@{/semantic/semantic.min.js}"></script>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/js/upload.js}"></script>
<div style="padding: 15px;">
    <table id="salary" lay-filter="clientTable"></table>
</div>
<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-xs" lay-event="calc">计算</a>
</script>
<script th:inline="javascript">
    layui.use(['form','table'], function() {
        let table = layui.table;
        let form = layui.form;
        table.render({
            elem: '#salary'
            , data:[]
            , cols: [
                [
                    {field: 'id', title: '序号', align: 'center'}
                    ,{field: 'staffId', title: '员工ID', align: 'center'}
                    , {field: 'projectId', title: '项目ID', align: 'center'}
                    , {field: 'time', title: '开始时间', align: 'center'}
                    , {field: 'isComplete', title: '是否完成', templet: function (res){
                        if (res.isComplete === 1)
                            return '<input id="'+'isComplete'+res.id+'" type="checkbox" checked="" lay-skin="switch"  lay-text="完成|未完成">'
                        else
                            return '<input id="'+'isComplete'+res.id+'" type="checkbox"  lay-skin="switch"  lay-text="完成|未完成">'
                    },align: 'center'}
                    , {field: 'attendance', title: '考勤', templet: function (res){
                        if (res.attendance === 1)
                            return '<input id="'+'attendance'+res.id+'" type="checkbox" checked="" name="open" lay-skin="switch"  lay-text="全勤|缺勤">'
                        else
                            return '<input id="'+'attendance'+res.id+'"  type="checkbox" name="close" lay-skin="switch"  lay-text="全勤|缺勤">'
                    },align: 'center'}
                    , {field: 'salary', title: '薪水', align: 'center'}
                    , {title: '操作', align: 'center', width: 100, toolbar: '#bar'}
                ]
            ]
        });
        const data = [[${salary}]];
        for (let datum of data) {
            datum.salary = ''
        }
        table.reload('salary', {data: data});
        form.on('switch(sexDemo)', function(obj){
            layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
        });
        table.on('tool(clientTable)', function (obj) { //tool是工具条事件名，参数是table原始容器的lay-filter属性值
            let layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'calc') {
                //监听性别操作
                let isComplete = 1
                let attendance = 1
               if ($("#"+"isComplete"+obj.data.id).is(':checked')===false){
                   isComplete = 0
               }
               if ($("#"+"attendance"+obj.data.id).is(':checked')===false){
                   attendance = 0
               }
                $.ajax({
                    url: "/staffProject/calc",
                    method: "post",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify({
                        "id": obj.data.id,
                        "isComplete": isComplete,
                        "attendance": attendance,
                        "staffId": obj.data.staffId,
                        "projectId": obj.data.projectId
                    }),
                    dataType: "json",
                    success: function (data) {
                        obj.update({
                            salary:data.result
                        })
                    }
                })
                layer.msg('计算成功', {icon: 6});
            }
        });

    });
</script>